

<template>
  <el-main>
      <!--  搜索框  -->
    <el-form :model="searchParam" label-width="80px" size="default" :inline="true">
      <el-form-item>
        <el-input placeholder="请输入关键字" v-model="searchParam.roleName" />
      </el-form-item>
      <el-form-item>
        <el-button  icon="Search" @click="searchBtn">搜索</el-button>
        <el-button type="danger" icon="Close" @click="resetBtn">重置</el-button>
        <el-button type="primary" icon="Plus" @click="addBtn">新增</el-button>
      </el-form-item>
    </el-form>

      <!-- 展示角色列表   -->
    <el-table :data="tableData" stripe border :height="tableHeight">
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <!-- 操作     -->
      <el-table-column label="操作" width="220" align="center">
        <template #default="scope">
          <el-button  type="primary" size="default" icon="Edit" @click="editBtn(scope.row)">编辑</el-button>
          <el-button  type="danger" size="default" icon="Delete" @click="delBtn(scope.row.roleId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页   -->
    <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10,100, 200, 300, 400]"
        :size="searchParam.pageSize"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchParam.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />


     <!-- 新增、编辑对话框 (共用)  -->
    <SysDialog
      :height="dialog.height"
      :title="dialog.title"
      :width="dialog.width"
      :visible="dialog.visible"
      @on-close="onClose"
      @on-confirm="commit"
    >
            <!-- 内容：插槽自定义       -->
            <template v-slot:content>
              <!-- 添加用户表单：1.表单对象 2.验证规则 3.ref属性 -->
              <el-form :model="addModel" ref="addRef" :rules="rules" label-width="auto"  size="default" :inline="true">
                <el-form-item prop="roleName" label="用户角色">
                  <el-input v-model="addModel.roleName" />
                </el-form-item>
                <el-form-item prop="remark" label="备注">
                  <el-input v-model="addModel.remark" />
                </el-form-item>
              </el-form>
            </template>
    </SysDialog>
  </el-main>


</template>

<script setup lang="ts">
  // 使用封装的弹框
  import SysDialog from "@/components/SysDialog.vue";
  import useDialog from '../../../hooks/useDialog.ts';
  import {ElMessage, type FormInstance} from 'element-plus'
  import {addApi, getListApi} from '../../../api/role/index.ts'

  import {nextTick, onMounted, reactive, ref} from "vue";
  import type {SysRole} from "@/api/role/RoleModel.ts";


  //定义角色列表
  const tableData = ref([])
  // 定义表格高度
  const tableHeight = ref(0)


  // 定义搜索框的条件,跟后端查询接口的入参有关
  const searchParam = reactive({
    currentPage:1, //默认第一页
    pageSize:10,  // 默认每页显示10条
    roleName:'',  //角色名称
    total:0,  //默认总条数是0
  })

  const {dialog,onShow,onClose} = useDialog()

  //新增表单对象
  const addModel = reactive({
    roleId:'',
    roleName:'',
    remark:''
  })
  //新增表单验证规则
  const rules = reactive({
    roleName: [
      {
        required: true,
        message: '请输入角色名称',
        trigger: 'change',
      },
    ],
  })
  // 新增表单ref属性
  const addRef = ref<FormInstance>()


  //搜素
  const searchBtn = ()=> {

  }
  //重置
  const resetBtn = ()=> {

  }

  //点击新增按钮：打开对话框
  const addBtn = () => {
    dialog.title = '新增'
    dialog.height = 180
    dialog.width = 400
    onShow()
  }

  //表单提交
  const commit =() => {
    addRef.value?.validate(async (valid) => {
      if (valid) {
        console.log('验证成功')
        //调用后端新增角色接口
        let res = await addApi(addModel)
        if (res && res.code === 200) {
          ElMessage.success(res.msg)
          onClose(); //关闭弹框
        }
      }
    })
  }

  //查询角色列表
  const getRoleList = async () => {
    let res = await getListApi(searchParam)
    if (res && res.code === 200) {
      //设置角色列表值
      tableData.value = res.data.records;
      //设置分页总条数
      searchParam.total = res.data.total
    }
  }

  //编辑表单  粗row:any 细row:SysRole
  const editBtn = (row:SysRole) => {
    console.log(row)
  }

  //删除表单 传惨的scope中肯定有
  const delBtn = (roleId:string) => {
    console.log(roleId)
  }


  // 页容量变化
  const handleSizeChange = (size:number) => {
    searchParam.pageSize = size
    getRoleList()
  }

  // 当前页码变化
  const handleCurrentChange = (page:number) => {
    searchParam.currentPage = page
    getRoleList()
  }



  onMounted(()=>{
    // 控制分页插件的位置高度
    nextTick( () => {
      tableHeight.value = window.innerHeight - 230
    })
    getRoleList()
  })

</script>

<style scoped lang="scss">

</style>